<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器</title>
    <link rel="stylesheet" href="./music.css">
</head>

<div class="box">
    <header>
        <div class="logo">
            <span>MUSIC</span>
            <i class="iconfont icon-yinle"></i>
        </div>
        <div class="search">
            <input id="word" type="search"  placeholder="搜索..."
            >
            <i id="sousuo" class="iconfont icon-sousuo"></i>
            <!-- 输出搜索结果的列表 -->
            <ul class="list">
            </ul>
        </div>
    </header>

    <section>
        <div id="viptip">该歌曲只有会员才能听完整版噢！普通用户只能试听30秒~</div>
        <div id="pic">
            <img id="musicpic">
        </div>
        <div id="lrc_area">
            <ul id="lyric">

            </ul>
        </div>
    </section>

    <footer>
        <div class="musicinf">
            <!-- 歌名-歌手 -->
            <div id="name">
                <p>还未播放歌曲噢...</p>
            </div>
            <!-- 进度 -->
            <div id="jd">
                <!-- 进度条 -->
                <input type="range" id="jdt" step="1" value="0" min="0" max="100">
                <div class="timebox">
                    <p id="songnowtime">00:00</p>
                    <p id="songtime"></p>
                </div>
            </div>
        </div>

        <!-- 控制 -->
        <div class="control">
            <div id="left">
                <i class="iconfont icon-shangyishou"></i>
            </div>
            <div id="state">
                <i class="iconfont icon-bofang" id="go"></i>
                <i class="iconfont icon-zanting " id="stop"></i>
            </div>
            <div id="right">
                <i class="iconfont icon-xiayishou"></i>
            </div>
        </div>
        <div class="ylrange"><input type="range" id="slice" value="50" min="0" max="100"></div>
        <div id="yin"><i class="iconfont icon-yinliang"></i></div>
        <!-- 播放列表 -->
        <div id="lb">
            <i class="iconfont icon-bofangliebiao"></i>
        </div>
    </footer>
    <div id="tip">您已静音！</div>
</div>
<script src="../asset/jquery-3.5.1.js"></script>
<script src="./music.js"></script>
</body>
</html>